import { App } from "vue";
/* 在容器中拖拽 */
/* 使用
    <div id="draggableBox" >
    <div v-draggable:draggableBox></div>
    </div>
*/
export let dragBox = (app: App) => {
    app.directive('dragBox', {
        mounted(el, binding) {
            // 设置目标元素基础属性
            el.style.cursor = 'move';
            el.style.position = 'fixed';
            // 获取容器宽高
            const containerId = binding.arg || null;
            let containerWidth = window.innerWidth;
            let containerHeight = window.innerHeight;
            // 存在父级容器
            if (containerId) {
                const containerEle = document.getElementById(containerId) as HTMLElement;
                let { width, height } = containerEle.getBoundingClientRect();
                containerWidth = width;
                containerHeight = height;
                if (!['fixed', 'absolute', 'relative'].includes(getStyle(containerEle, 'position'))) {
                    containerEle.style.position = 'relative';
                }
                el.style.position = 'absolute';
            }

            // 鼠标在目标元素上按下
            el.addEventListener('mousedown', (e: MouseEvent) => {
                let { width, height } = el.getBoundingClientRect();
                // 当前目标元素的left与top
                const left = el.offsetLeft;
                const top = el.offsetTop;
                // 保存按下的鼠标的X与Y
                const mouseX = e.clientX;
                const mouseY = e.clientY;
                // 计算边界值
                const leftLimit = left;
                const rightLimit = containerWidth - left - width;
                const topLimit = top;
                const bottomLimit = containerHeight - top - height;

                // 监听鼠标移动
                document.onmousemove = (e) => {
                    // 鼠标移动的距离
                    let disX = e.clientX - mouseX;
                    let disY = e.clientY - mouseY;
                    // 左右边界
                    if (disX < 0 && disX <= -leftLimit) {
                        el.style.left = (left - leftLimit) + 'px';
                    } else if (disX > 0 && disX >= rightLimit) {
                        el.style.left = (left + rightLimit) + 'px';
                    } else {
                        el.style.left = (left + disX) + 'px';
                    }
                    // 上下边界
                    if (disY < 0 && disY <= -topLimit) {
                        el.style.top = (top - topLimit) + 'px';
                    } else if (disY > 0 && disY >= bottomLimit) {
                        el.style.top = (top + bottomLimit) + 'px';
                    } else {
                        el.style.top = (top + disY) + 'px';
                    }
                    return false;
                }

                // 监听鼠标抬起
                document.onmouseup = () => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            });
        },
    })
    // 获取元素的相关CSS
    function getStyle(el: any, attr: any) {
        return el.currentStyle ? el.currentStyle[attr] : window.getComputedStyle(el, "")[attr];
    }
}

/* 直接拖拽 */
export let draggable = (app: App) => {
    app.directive('draggable', {
        mounted(el) {
            // 设置目标元素基础属性
            // el.style.cursor = 'move';
            el.style.position = 'fixed';

            // 监听鼠标在目标元素上按下
            el.addEventListener('mousedown', (e: MouseEvent) => {
                // 当前目标元素的left与top
                const left = el.offsetLeft;
                const top = el.offsetTop;
                // 保存按下的鼠标的X与Y
                const mouseX = e.clientX;
                const mouseY = e.clientY;

                // 监听鼠标移动
                document.onmousemove = (e) => {
                    // 鼠标移动的距离
                    let disX = e.clientX - mouseX;
                    let disY = e.clientY - mouseY;

                    el.style.left = (left + disX) + 'px';
                    el.style.top = (top + disY) + 'px';
                    return false // 防止选中文本，文本拖动的问题
                }

                // 监听鼠标抬起
                document.onmouseup = () => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            });
        }
    })
}
